<template>
  <div class="tag">
    <Table
      @get="getTag"
      @add="addNewTag"
      @deletec="deleteTags"
      @ut="updateTag"
      :res="tag"
      :dialogFormVisible="dialogFormVisible"
      :options="option"
    ></Table>
  </div>
</template>

<script>
// 导入接口
import { updateTagAPI } from '@/API/api'
// 从vuex中按需导入辅助函数
import { mapActions, mapState } from 'vuex'
// 导入 Table 组件
import Table from '@/components/Table.vue'
export default {
  name: 'Tag',
  components: {
    Table
  },
  data: () => ({
    // 当前页数
    currentPage4: 1,
    // 一页显示的条数
    pagesize: 5,
    // 对话框是否显示
    dialogFormVisible: false,
    // 阀门，初始状态：开
    flag: true,
    // type
    option: [
      {
        value: 'primary',
        label: '紫色'
      },
      {
        value: 'success',
        label: '绿色'
      },
      {
        value: 'info',
        label: '灰色'
      },
      {
        value: 'warning',
        label: '黄色'
      },
      {
        value: 'danger',
        label: '红色'
      }
    ]
  }),
  computed: {
    ...mapState('tag', ['tag'])
  },
  methods: {
    // 将 cate 小仓库的一步方法映射为当前组件的方法
    ...mapActions('tag', ['addTag', 'getTag', 'deleteTag']),
    // 新增分类
    async addNewTag(form) {
      try {
        await this.addTag(form)
        this.$message.success('success')
        this.getTag({ curpage: this.currentPage4, pagesize: this.pagesize })
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 修改标签
    async updateTag(data) {
      console.log(data)
      try {
        const { data: res } = await updateTagAPI(data)
        if (res.status !== 0) return this.$message.error(res.msg)
        console.log(res)
        this.$message.success(res.msg)
      } catch (error) {
        console.log(error.message)
      }
    },
    // 删除分类
    async deleteTags(id) {
      const that = this
      // 如果阀门是打开的，进入if判断语句体
      if (this.flag) {
        // 进入判断体后关闭阀门
        this.flag = false
        this.$confirm('是否删除标签', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          async callback(actions) {
            if (actions !== 'confirm') { return that.$message.warning('已取消删除') }
            // 发送请求
            try {
              await that.deleteTag({ id, is_delete: 1 })
              that.$message.success('success')
              that.getTag({
                curpage: that.currentPage4,
                pagesize: that.pagesize
              })
            } catch (err) {
              that.$message.error(err.message)
            }
          }
        })
        // 等定时器执行完毕再将阀门打开
        setTimeout(() => {
          // 定时器执行完毕后，打开阀门
          this.flag = true
        }, 2000)
      }
    }
  },
  created() {
    this.getTag({ curpage: this.currentPage4, pagesize: this.pagesize })
  }
}
</script>

<style lang="less" scoped>
.tag {
  position: relative;
  padding: 0 20px;
  .mt {
    float: right;
    margin-top: 20px;
  }
  .btn {
    margin-top: 20px;
  }
}
</style>
